<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        标绘类
        <button onclick="point(1)">普通点</button>
        <button onclick="point(2)">加强点</button>
        <button onclick="polyline(1)">线</button>
        <button onclick="polyline(2)">加强线</button>
        <button onclick="polygon(1)">面</button>
        <button onclick="exportKml()">exportKml</button>
        <button onclick="importKml()">importKml</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                {
                    type: "TDTImageryLayer",
                    mold: "image",
                    tk: "7b435c61bff7f77eb49206e10d6397bd",
                },
            ],
            camera: {
                position: {
                    x: 119.4135823,
                    y: 26.11072,
                    z: 1069,
                },
                angle: {
                    heading: 0,
                    pitch: -90,
                    roll: 0,
                },
            },
            cesium: {
                infoBox: false,
                selectionIndicator: false,
            },
        });

        var plot = new cpc.Plot(map);
        function point(type) {
            switch (type) {
                case 1:
                    console.log("PlotPoint");
                    plot.activate(cpc.EDrawManager.DrawPoint, {
                        point: {
                            pixelSize: 10,
                            color: Cesium.Color.BLUE,
                        },
                    });
                    break;
                case 2:
                    console.log("PlotPoint");
                    plot.activate(cpc.EDrawManager.DrawPoint, {
                        point: {
                            pixelSize: 0,
                            color: Cesium.Color.BLUE,
                        },
                        label: {
                            //文字标签
                            text: "文字标签",
                            font: "500 30px Helvetica", // 15pt monospace
                            scale: 0.5,
                            style: Cesium.LabelStyle.FILL,
                            fillColor: Cesium.Color.WHITE,
                            pixelOffset: new Cesium.Cartesian2(-8, -35), //偏移量
                            showBackground: true,
                            backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0),
                        },
                        billboard: {
                            //图标
                            image: "../images/point/blueCamera.png",
                            width: 30,
                            height: 42,
                        },
                    });
                    break;
            }
        }
        function polyline(type) {
            switch (type) {
                case 1:
                    plot.activate(cpc.EDrawManager.DrawPolyline, {
                        polyline: {
                            width: 3,
                        },
                    });
                    break;
                case 2:
                    var material = new cpc.MaterialDynamicFlow({
                        color: Cesium.Color.YELLOW,
                        speed: 10,
                        opacity: 0,
                        percent: 0.3,
                    });
                    plot.activate(cpc.EDrawManager.DrawPolyline, {
                        polyline: {
                            width: 3,
                            material: material,
                        },
                    });
                    break;
                default:
                    break;
            }
        }
        function polygon() {
            var material = new cpc.MaterialTrailImage({
                color: Cesium.Color.ORANGE,
                speed: 10,
                image: "../images/colors/colors.png",
                count: 1,
                direction: true,
                order: false,
            });
            plot.activate(cpc.EDrawManager.DrawPolygon, {
                polygon: {
                    height: 0,
                    material: Cesium.Color.RED.withAlpha(0.5),
                    outline: true,
                    outlineColor: Cesium.Color.BLACK,
                },
                polyline: {
                    width: 30,
                    material: material,
                },
            });
        }
        function exportKml() {
            plot.exportKml().then((res) => {
                console.log("kml数据", res, res.kml);
            });
        }
        function importKml() {
            map.viewer.dataSources.add(Cesium.KmlDataSource.load("../kml/polt.kml"));
        }
    </script>
</body>

</html>